<template>
	<view>
		<view class="logo-content u-flex">
			<u--image :src="logo" width="100rpx" height="100rpx"></u--image>
			<text class="title">智慧能源能力服务平台</text>
		</view>
		<view class="login-form-content">
			<view class="input-item">
				<view class="icon">
					<u-icon name="home" size="20" color="rgb(153, 153, 153)"></u-icon>
				</view>
				<selectzitem style="flex: 1;height: 100%;" v-model="loginForm.tenantName" :options="tenantList" />
			</view>
			<view class="input-item">
				<view class="icon">
					<u-icon name="account" size="20" color="rgb(153, 153, 153)"></u-icon>
				</view>
				<u--input placeholder="请输入内容" border="none" v-model="loginForm.username"></u--input>
			</view>
			<view class="input-item">
				<view class="icon">
					<u-icon name="lock" size="20" color="rgb(153, 153, 153)"></u-icon>
				</view>
				<u--input type="password" placeholder="请输入内容" border="none" v-model="loginForm.password"></u--input>
			</view>
			<view class="action-btn">
				<button type="primary" @click="handleLogin" class="login-btn">
					登录
				</button>
			</view>
		</view>
		<view class="xieyi">
			<text class="text-grey1">登录即代表同意</text>
			<text @click="gowebview(1)" class="text-blue">《用户协议》</text>
			<text @click="gowebview(0)" class="text-blue">《隐私协议》</text>
		</view>

		<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
			:imgSize="{ width: '330px', height: '155px' }" ref="verifyRef">
		</Verify>
	</view>
</template>

<script>
import logo from "@/static/logo.png"
import Verify from "@/components/verifition/Verify"
import {
	getTenantList
} from "@/api/login.js"
export default {
	components: {
		Verify
	},
	data() {
		return {
			logo,
			tenantList: [],
			loginForm: {
				username: "",
				password: "",
				captchaVerification: "",
				tenantName: ""
			}
		}
	},

	mounted() {
		this.init()
	},
	methods: {
		async init() {

			let list = await getTenantList();
			this.tenantList = list.data.map(e => {
				return {
					label: e.name,
					prop: String(e.id),
					website: e.website
				}
			})
			console.log(this.tenantList);
		},
		async handleLogin() {
			// this.$refs.verifyRef.show();
			if (!this.loginForm.tenantName) {
				this.$u.toast("请选择所属企业")
			} else if (!this.loginForm.username) {
				this.$u.toast("请输入您的账号")
			} else if (!this.loginForm.password) {
				this.$u.toast("请输入您的密码")
			} else {
				// uni.setStorageSync('USERNAME',this.loginForm.tenantName);
				this.$refs.verifyRef.show();
			}
		},
		async pwdLogin(captchaParams) {
			this.$refs.verifyRef.clickShow = false;
			uni.setStorageSync('USERNAME', this.loginForm.tenantName);
			this.loginForm.captchaVerification = captchaParams.captchaVerification;
			uni.showLoading({
				title: '加载中'
			})
			try {
				await this.$store.dispatch("user/Login", this.loginForm)
				uni.hideLoading();
				uni.navigateTo({
					url: `/pageswork/index/index`
				})
			} catch {
				uni.hideLoading();
			}

		},
		gowebview(index = 0) {
			const site = this.$config.appInfo.agreements[index]
			uni.navigateTo({
				url: `/pages/webview/webview?title=${site.title}&url=${site.url}`
			})
		}
	}
}
</script>
<style>
page {
	background: #fff;
}
</style>
<style lang="scss">
.logo-content {
	width: 100%;
	font-size: 21px;
	text-align: center;
	padding-top: 10vh;
	display: flex;
	align-items: center;
	justify-content: center;

	.title {
		margin-left: 10px;
	}
}

.login-form-content {
	margin: 20px auto;
	margin-top: 100rpx;
	width: 80%;

	.input-item {
		display: flex;
		align-items: center;
		margin-top: 20px;
		background-color: #f5f6f7;
		height: 45px;
		border-radius: 20px;
		box-sizing: border-box;
		padding-left: 20rpx;

		.input {
			width: 100%;
			font-size: 14px;
			line-height: 20px;
			text-align: left;
			padding-left: 10rpx;
		}

		.icon {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10rpx;
		}
	}

	.login-btn {
		margin-top: 40px;
		height: 45px;
		border-radius: 45px;
	}

}

.xieyi {
	color: #333;
	margin-top: 20px;
	text-align: center;

	.text-blue {
		color: #0081ff;
	}
}
</style>